<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <cart-header></cart-header>

    <!-- 商品 Item 项组件 -->
    <cart-item v-for="item in list" :key="item.id" :item="item"></cart-item>

    <!-- Foote 区域 -->
    <cart-footer></cart-footer>
  </div>
</template>
<script>
import CartHeader from "@/component/cart-header.vue";
import CartFooter from "@/component/cart-footer.vue";
import CartItem from "@/component/cart-item.vue";
import { mapState } from "vuex";
export default {
  name: "VuexCartIndex",
  props: ["mobile"],
  components: {
    CartHeader,
    CartFooter,
    CartItem,
  },

  data() {
    return {};
  },
  created() {
    this.$store.dispatch("cart/getCartList");
    
  },
  mounted() {
    this.changeMobile(true);
  },
  destroyed() {
    this.changeMobile(false);
  },
  computed: {
    ...mapState("cart", ["list"]),
  },
  methods: {
    changeMobile(can) {
      this.$emit("change", can);
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
.app-container {
  padding: 50px 0;
  font-size: 14px;
}
</style>